<template>
  <div>
    <div style="margin: 10px;align-content: center" >
      <el-input style="width: 200px" placeholder="年"  v-model="year" suffix-icon="el-icon-search"></el-input>
      <el-input style="width: 200px;margin-left: 8px"  v-model="month" placeholder="月" suffix-icon="el-icon-search" ></el-input>
      <el-button type="primary" style="margin-left: 8px"  @click="search"> <i class="el-icon-search" style="margin-right: 5px"> </i>搜索 </el-button>
       <el-button type="primary" style="margin-left: 8px" @click="empty">清空条件</el-button>

    </div>
    <div id="main" style="width: 100%; height:600px; margin-top: 50px" ></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
   export default {
     data(){
       return{
         pageInFo:{},
         year:'',
         month:'',

       }
     },
     methods:{
       empty(){
         this.year='',
         this.month=''
       },

       show1(){

         let app = {};

         let chartDom = document.getElementById('main');
         let myChart = echarts.init(chartDom);
         let option;

         const posList = [
           'left',
           'right',
           'top',
           'bottom',
           'inside',
           'insideTop',
           'insideLeft',
           'insideRight',
           'insideBottom',
           'insideTopLeft',
           'insideTopRight',
           'insideBottomLeft',
           'insideBottomRight'
         ];
         app.configParameters = {
           rotate: {
             min: -90,
             max: 90
           },
           align: {
             options: {
               left: 'left',
               center: 'center',
               right: 'right'
             }
           },
           verticalAlign: {
             options: {
               top: 'top',
               middle: 'middle',
               bottom: 'bottom'
             }
           },
           position: {
             options: posList.reduce(function (map, pos) {
               map[pos] = pos;
               return map;
             }, {})
           },
           distance: {
             min: 0,
             max: 100
           }
         };
         app.config = {
           rotate: 90,
           align: 'left',
           verticalAlign: 'middle',
           position: 'insideBottom',
           distance: 10,
           onChange: function () {
             const labelOption = {
               rotate: app.config.rotate,
               align: app.config.align,
               verticalAlign: app.config.verticalAlign,
               position: app.config.position,
               distance: app.config.distance
             };
             myChart.setOption({
               series: [
                 {
                   label: labelOption
                 },
                 {
                   label: labelOption
                 },
                 {
                   label: labelOption
                 },
                 {
                   label: labelOption
                 }
               ]
             });
           }
         };
         const labelOption = {
           show: true,
           position: app.config.position,
           distance: app.config.distance,
           align: app.config.align,
           verticalAlign: app.config.verticalAlign,
           rotate: app.config.rotate,
           formatter: '{c}  {name|{a}}',
           fontSize: 15,
           rich: {
             name: {}
           }
         };
         option = {
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'shadow'
             }
           },
           legend: {
             data: ['减款', '代收货款变更后', '预付金额', '送货费',"运费","保险费"]
           },
           toolbox: {
             show: true,
             orient: 'vertical',
             left: 'right',
             top: 'center',
             feature: {
               mark: { show: true },
               dataView: { show: true, readOnly: false },
               magicType: { show: true, type: ['line', 'bar', 'stack'] },
               restore: { show: true },
               saveAsImage: { show: true }
             }
           },
           xAxis: [
             {
               type: 'category',
               axisTick: { show: false },
               data: []
             }
           ],
           yAxis: [
             {
               type: 'value'
             }
           ],
           series: [
             {
               name: '减款',
               type: 'bar',
               barGap: 0,
               label: labelOption,
               emphasis: {
                 focus: 'series'
               },
               data: []
             },
             {
               name: '代收货款变更后',
               type: 'bar',
               label: labelOption,
               emphasis: {
                 focus: 'series'
               },
               data: []
             },
             {
               name: '预付金额',
               type: 'bar',
               label: labelOption,
               emphasis: {
                 focus: 'series'
               },
               data: []
             },
             {
               name: '送货费',
               type: 'bar',
               label: labelOption,
               emphasis: {
                 focus: 'series'
               },
               data: []
             },
             {
               name: '运费',
               type: 'bar',
               label: labelOption,
               emphasis: {
                 focus: 'series'
               },
               data: []
             },
             {
               name: '保险费',
               type: 'bar',
               label: labelOption,
               emphasis: {
                 focus: 'series'
               },
               data: []
             },
           ]
         };
         if (this.year =='' && this.month ==''){
           this.axios.get("http://localhost:8080/fare/bar/1/2").then(res=>{
             option.xAxis[0].data = res.data.data.x
             option.series[0].data = res.data.data.y1
             option.series[1].data = res.data.data.y2
             option.series[2].data = res.data.data.y3
             option.series[3].data = res.data.data.y4
             option.series[4].data = res.data.data.y5
             option.series[5].data = res.data.data.y6
             myChart.setOption(option);
           })
         }else if(this.year !='' && this.month ==''){
           this.axios.get("http://localhost:8080/fare/bar/1/2/" +this.year +"-01-01").then(res=>{
             option.xAxis[0].data = res.data.data.x
             option.series[0].data = res.data.data.y1
             option.series[1].data = res.data.data.y2
             option.series[2].data = res.data.data.y3
             option.series[3].data = res.data.data.y4
             option.series[4].data = res.data.data.y5
             option.series[5].data = res.data.data.y6
             myChart.setOption(option);
           })
         }else{
           this.axios.get("http://localhost:8080/fare/bar/1/2/" +this.year +"-" +this.month+"-01").then(res=>{
             option.xAxis[0].data = res.data.data.x
             option.series[0].data = res.data.data.y1
             option.series[1].data = res.data.data.y2
             option.series[2].data = res.data.data.y3
             option.series[3].data = res.data.data.y4
             option.series[4].data = res.data.data.y5
             option.series[5].data = res.data.data.y6
             myChart.setOption(option);
           })
         }


       },
       search(){
         let year = /^(19|20)\d{2}$/
         let month = /^((0?[1-9])|(1[0-2]))$/
         let flag1 = year.test(this.year)
         let flag2 = month.test(this.month)
         if (this.year ==''){
           this.$message.error("请输入年份");
         }else if(!flag1){
           this.$message.error("年份格式错误");
         }else if(this.month !=''){
           if (!flag2){
             this.$message.error("月份格式错误");
           }else {
             this.show1()
           }
         }else {
           this.show1()
         }
       },

     },

     mounted() {
      this.show1();
     }
   }

</script>

<style>

</style>